<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/common/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="/static/common/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="/static/admin/css/admin.css"  media="all">
  <script src="/static/common/layui/layui.js"></script>
  <script src="/static/common/jquery/jquery.min.js"></script>
  <script src="/static/common/vue/vue-v2.6.10.js"></script>
  <style>
    .layui-upload-img { width: 90px; height: 90px; margin: 0; }
    .pic-more { width:100%; float: left; margin: 10px 0px 0px 0px;}
    .pic-more li { width:90px; float: left; margin-right: 5px;}
    .pic-more li .layui-input { display: initial; }
    .pic-more li a { position: absolute; top: 0; display: block; }
    .pic-more li a i { font-size: 24px; background-color: #008800; }
    #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
    #slide-pc-priview li{position: relative;}
    #slide-pc-priview li .operate{ color: #000; display: none;}
    #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
    #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
    #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #slide-pc-priview li:hover .operate{ display: block;}    
  </style>
</head>
<body style="padding:10px;">
  <div class="tplay-body-div">
    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li><a href="{:url('product/lst')}" class="a_menu">产品管理</a></li>
        <li class="layui-this">新增产品</li>
      </ul>
    </div>
    <div style="margin-top: 20px;">
    </div>
    <form class="layui-form" id="admin">
      
      <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
          <input name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" {notempty name="$info.name"}value="{$info.name}"{/notempty}>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
          <select name="category_id" lay-filter="aihao">
            <option>请选择分类</option>
            {volist name="category" id="vo"}
            <option value="{$vo.id}" {notempty name="$info.category_id"}{eq name="$info.category_id" value="$vo.id"}selected{/eq}{/notempty}>{$vo.name}</option>
            {/volist}
          </select>
        </div>
      </div>

      <div class="layui-upload" id="upload-thumb">
        <label class="layui-form-label">封面图</label>
        <button type="button" class="layui-btn" id="thumb">上传图片</button>
        <div class="layui-upload-list">
          <label class="layui-form-label"></label>
          <img class="layui-upload-img" id="demo1" width="150" height="150" {notempty name="$info.img_id"}src="{$info.img_id|getUrl}"{/notempty}>
          <p id="demoText"></p>
        </div>
      </div>

      <div class="layui-form-item" id="pics">
        <div class="layui-form-label">商品图集</div>
        <div class="layui-input-block" style="width: 70%;">
          <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
            <div class="pic-more">
              <ul class="pic-more-upload-list" id="slide-pc-priview">
                  {notempty name="$productImage"}
                    {foreach $productImage as $vo}
                      <li class="item_img">
                        <div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div>
                        <img src="{$vo|getUrl}" class="img" >
                        <input type="hidden" name="pro_img_id[]" value="{$vo}" />
                      </li>
                    {/foreach}
                  {/notempty}  
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">主题</label>
        <div class="layui-input-inline" style="width: 1000px;">
          <dl>
              <?php
                if(isset($info['themes'])){
                  $pro = [];
                  foreach($info['themes'] as $v){
                    $pro[] = $v['id'];
                  }
                }
              ?>
              <dt>
                {foreach $theme as $vo}
                <input type="checkbox" name="theme_id[]" title="{$vo.name}" value="{$vo.id}" 
                  <?php
                    if(isset($pro)){
                      if(in_array($vo['id'],$pro)){
                        echo 'checked';
                      }
                    }
                  ?>
                lay-skin="primary">
                {/foreach}
              </dt>
          </dl>
        </div>
      </div>
      <div class="layui-form-item" id="box">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-inline" style="width: 600px;">
          <p>列：属性名称 （品名）、属性 （杨梅）</p>
          <table class="layui-table">
            <colgroup>
              <col width="100">
              <col width="100">
              <col width="100">
            </colgroup>
            <tr class="text-danger">
              <th class="text-center">属性名称</th>
              <th class="text-center">属性</th>
              <th class="text-center">操作</th>
            </tr>
            <tr class="text-center" v-for="(item, index) in myData" :key="item">
              <td><input lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" name="names[]" v-model="item.name"></td>
              <td><input lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" name="detail[]" v-model="item.detail"></td>
              <td>
                <button class="layui-btn layui-btn-primary pull-left" data-toggle="modal" data-target="#layer" v-on:click="deleteMsg(index)">删除</button>
              </td>
            </tr>
          </table>
          <button type="button" class="layui-btn layui-btn-primary pull-left" @click="add()">添加</button>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
          <input name="price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" {notempty name="$info.price"}value="{$info.price}"{/notempty}>
        </div>
        <div class="layui-form-mid layui-word-aux">单位/分</div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
          <input name="stock" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" {notempty name="$info.stock"}value="{$info.stock}"{/notempty}>
        </div>
      </div>

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">摘要</label>
        <div class="layui-input-block" style="max-width:500px;">
          <textarea placeholder="请输入内容" class="layui-textarea" name="summary">{notempty name="$info.summary"}{$info.summary}{/notempty}</textarea>
        </div>
      </div>
 
      {notempty name="$info"}
        <input type="hidden" name="id" value="{$info.id}">
      {/notempty}
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    <script>
      new Vue({
        el:'#box',
        data:{
          myData: {$property|raw},
          name:'',
          detail:''
        },
        methods:{
          add:function(){
            this.myData.push({
                name:this.name,
                detail:this.detail
            });

            this.name='';
            this.detail='';
          },
          deleteMsg:function(n){
            this.myData.splice(n,1);
          }
        }
      });
    </script>
    <script>
        var message;
        layui.config({
            base: '/static/admin/js/',
            version: '1.0.1'
        }).use(['app', 'message'], function() {
            var app = layui.app,
                $ = layui.jquery,
                layer = layui.layer;
            //将message设置为全局以便子页面调用
            message = layui.message;
            //主入口
            app.set({
                type: 'iframe'
            }).init();
        });
    </script>
    <script>
      layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(window).on('load', function() {
          form.on('submit(admin)', function(data) {
            $.ajax({
              url:"{:url('product/addEdit')}",
              data:$('#admin').serialize(),
              type:'post',
              async: false,
              success:function(res) {
                // console.log(res.msg);
                if(res.code == 1) {
                  layer.alert(res.msg, function(index){
                    location.href = res.url;
                  })
                } else {
                  layer.msg(res.msg);
                }
              }
            })
            return false;
          });
        });
      });
    </script>
    <script>
      layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
          elem: '#thumb' //绑定元素
          ,url: "{:url('common/upload')}" //上传接口
          ,done: function(res){
            //上传完毕回调
            if(res.code == 2) {
              $('#demo1').attr('src',res.src);
              $('#upload-thumb').append('<input type="hidden" name="img_id" value="'+ res.id +'"><input type="hidden" name="main_img_url" value="'+ res.src +'">');
            } else {
              layer.msg(res.msg);
            }
          }
          ,error: function(){
            //请求异常回调
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
            });
          }
        });
      });
    </script>
    <script>
      layui.use('upload', function(){
        var $ = layui.jquery;
        var upload = layui.upload;            
        upload.render({
          elem: '#slide-pc',
          url: "{:url('admin/common/upload')}",
          size: 500,
          exts: 'jpg|png|jpeg',
          multiple: true,
          before: function(obj) {
            layer.msg('图片上传中...', {
              icon: 16,
              shade: 0.01,
              time: 0
            })
          },
          done: function(res) {
            layer.close(layer.msg());//关闭上传提示窗口
              if(res.status == 0) {
                return layer.msg(res.message);
              }
              //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
              $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img src="' + res.src + '" class="img" ><input type="hidden" name="pro_img_id[]" value="' + res.id + '" /></li>');
          }
        });
      });
      //点击多图上传的X,删除当前的图片
      $("body").on("click",".close",function(){
        $(this).closest("li").remove();
      });
      //多图上传点击<>左右移动图片
      $("body").on("click",".pic-more ul li .toleft",function(){
        var li_index=$(this).closest("li").index();
        if(li_index>=1){
          $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
        }
      });
      $("body").on("click",".pic-more ul li .toright",function(){
        var li_index=$(this).closest("li").index();
        $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
      });
    </script>
  </div>
</body>
</html>